<template>
    <div class="dataCenterMain">
        <div class="funb">
            <div class="search">
                <el-input :placeholder="searchCondition" v-model="filterText"></el-input>
                <span class='searchButton' @click="searchData">搜索</span>
                <i class="el-icon-refresh-right" @click="changeSearchCondition"></i>
            </div>
            <div class="content">
                <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
                <el-checkbox-group v-model="checkedUsers" @change="handlecheckedUsersChange">
                    <el-checkbox v-for="user in showUsers" :label="user" :key="user.id">{{user.msisdn}}</el-checkbox>
                </el-checkbox-group>
            </div>
        </div>
        <div class="tableContent">
            <div class="filtrate">
                <el-date-picker
                v-model="timer"
                type="datetimerange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期">
                </el-date-picker>
                <div class="button">
                    <el-button type="primary" @click="query" size="small" icon="el-icon-search">查询</el-button>
                    <!--<el-button @click="exportExcel" size="small" icon="el-icon-upload2">导出</el-button>-->
                    <el-button size="small" icon="el-icon-refresh-left" @click="timer = ''">重置</el-button>
                </div>
            </div>
            <el-table
                :data="tableData"
                style="font-size: 13px;margin-top: 10px;"
                :header-cell-style="tableHeader"
                id="TrackQueryTable"
                :default-sort = "{prop: 'date', order: 'descending'}">
                <el-table-column prop="msid" label="手机号码" width="120"></el-table-column>
                <el-table-column prop="createDate" label="告警时间" width="160" sortable></el-table-column>
                <el-table-column prop="warningLng" label="告警经度" width="140" :show-overflow-tooltip="true"></el-table-column>
                <el-table-column prop="warningLat" label="告警纬度" width="120" :show-overflow-tooltip="true"></el-table-column>
              <el-table-column prop="warningType" label="告警类型" width="120"></el-table-column>
                <el-table-column prop="warningLocation" label="位置描述" width="180" :show-overflow-tooltip="true"></el-table-column>

            </el-table>
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page.sync="currentPage1"
                :page-size="limit"
                layout="total, prev, pager, next"
                :total="total">
            </el-pagination>
        </div>
    </div>
</template>


<script>

import {dateFormat} from '@/base/utils';

export default {
    components: {  },
    data() {
        return {
            checkAll: false,
            checkedUsers: [],
            users: [
                {id: '1',
                    phone: '123456789'
                },
                {
                    id: '2',
                    phone: '987654321'
                },
                {
                    id: '3',
                    phone: '12313415'
                },
                {
                    id: '4',
                    phone: '1908268123'
                }
            ],
            showUsers:[],
            isIndeterminate: true,
            filterText: '',
            tableData: [],
            currentPage: 1,
            timer: '',
            tableHeader: {
                backgroundColor: '#E1F1FF',
                color: '#4389D6'
            },
            searchCondition: '请输入名称',
            searchName: '', //搜索名称
            searchTel: '', //搜索SIM卡号
            currentPage1: 1,
            limit: '',
            page: 1,
            total: 0,
            personIds: []
        };
    },
    methods:{
        handleCheckAllChange(val) {
            this.checkedUsers = val ? this.users : [];
            this.isIndeterminate = false;
            this.personIds = this.checkedUsers.map(items => {
                return items.personId
            })
        },
        handlecheckedUsersChange(value) {
            let checkedCount = value.length;
            this.checkAll = checkedCount === this.users.length;
            this.isIndeterminate = checkedCount > 0 && checkedCount < this.users.length;
            this.personIds = value.map(items => {
                return items.personId
            })
        },
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
        },
        handleCurrentChange(val) {
            this.page = val;
            if(this.tableData.length == 0) {
                return
            }
            this.getTrackData();
        },
        query() {
            console.log(this.personIds);
            if(this.personIds.length == 0) {
                this.$message({
                    type: "info",
                    message: "请选择用户",
                });
            }else if(!this.timer) {
                this.$message({
                    type: "info",
                    message: "请选择时间",
                });
            }else {
                this.currentPage1 = 1;
                this.getTrackData();
            }
        },
        //定义导出Excel表格事件
        exportExcel() {
            var fix = document.querySelector('.el-table__fixed');
            var wb;
            if (fix) {
                wb = XLSX.utils.table_to_book(document.querySelector("#TrackQueryTable").removeChild(fix));
                document.querySelector("#TrackQueryTable").appendChild(fix);
            } else {
                wb = XLSX.utils.table_to_book(document.querySelector("#TrackQueryTable"));
            }
            /* get binary string as output */
            var wbout = XLSX.write(wb, {
                bookType: 'xlsx',
                bookSST: true,
                type: 'array'
            });
            try {
                FileSaver.saveAs(
                new Blob([wbout], {
                    type: 'application/octet-stream'
                }),
                '轨迹查询.xlsx'
                );
            } catch (e) {
                if (typeof console !== 'undefined') console.log(e, wbout);
            }
            return wbout;
        },
        //切换搜索条件
        changeSearchCondition() {
            this.filterText = '';
            if(this.searchCondition == '请输入名称') {
                this.searchCondition = '请输入SIM卡号';
            }else if(this.searchCondition == '请输入SIM卡号') {
                this.searchCondition = '请输入名称';
            }
        },
        //点击搜索
        searchData() {
            if(this.searchCondition == '请输入名称') {
                this.searchName = this.filterText;
                this.searchTel = '';
                this.getUserList();
            }else if(this.searchCondition == '请输入SIM卡号') {
                this.searchTel = this.filterText;
                this.searchName = '';
                this.getUserList();
            }
        },
        //查询人员列表
        getUserList() {
            let url = '/lbs/datacenter/track/h5QryMemberInfo';
            let params = {
                searchName: this.searchName,
                searchMsisdn: this.searchTel,
            }
            this.$http.post(url, params).then(res => {
                console.log(res);
                let {retCode,retMsg,data} = res.data;
                if (retCode == '0') {//成功的情况
                  this.users = data;
                  this.showUsers = this.users;
                } else {
                  this.$alert(retMsg || '请求失败');
                }
            }).catch(err => {
              this.$alert(err)
            })
        },
        //获取轨迹查询数据
        getTrackData() {
            let url = '/lbs/locatepeople/locateWarning/h5QryLocateWarningList';
            let params = {
                personIds: JSON.stringify(this.personIds),
                startTime: dateFormat(this.timer[0], ("yyyy/MM/dd hh:mm:ss")),
                endTime: dateFormat(this.timer[1], ("yyyy/MM/dd hh:mm:ss")),
                pageNum: this.page,
                pageSize: this.limit
            }
            this.$http.post(url, params).then(res => {
                console.log(res);
                let {retCode,retMsg,pageData,total} = res.data;
                if (retCode == '0') {//成功的情况
                    this.tableData = pageData;
                    this.total = total;
                    this.tableData.forEach(items => {
                        if(items.recordType == '1') {
                            items.recordType = '信令位置'
                        }
                    })
                } else {
                  this.$alert(retMsg || '请求失败');
                }
            }).catch(err => {
              this.$alert(err)
            })
        }
    },
    created() {

    },
    mounted() {
        this.limit = parseInt((document.getElementById('TrackQueryTable').clientHeight-48)/48);
        this.getUserList();
    },
    watch: {

    },
}
</script>

<style scoped lang="less">
.dataCenterMain {
    display: flex;
}
.funb {
    border-left: 1px solid #eee;
    border-right: 1px solid #eee;
    background-color: #FBFBFB;
    position: relative;
}
.search {
    margin: 10px 20px 8px 20px;
    position: relative;
    .searchButton {
        position: absolute;
        font-size: 12px;
        color: #1681FB;
        right: 10px;
        top: 27px;
        cursor: pointer;
    }
    .el-icon-refresh-right {
        position: absolute;
        top: 27px;
        right: 38px;
    }
}
.content {
    width: 250px;
    display: flex;
    flex-direction: column;
    & > label {
        margin: 5px 20px;
    }
}
.filtrate {
    height: 62px;
    background: #FBFBFB;
    border-bottom: 1px solid #E1E1E1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    border-radius: 0 16px 0 0;
}
.tableContent {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
</style>
<style lang="less">
.dataCenterMain .el-checkbox-group {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 120px;
    left: 0;
    bottom: 30px;
    overflow-y: scroll;
    label {
        border-bottom: 1px solid #eee;
        padding: 10px 0;
        width: 210px;
        margin: 0 20px;
        box-sizing: border-box;
    }
}
.dataCenterMain .el-input {
    margin: 20px 0;
    width: auto;
    .el-input__inner {
        width: 210px;
        height: 30px;
        border-radius: 15px;
    }
}
.dataCenterMain .el-pagination {
    text-align: center;
}
.dataCenterMain .el-pagination {
    margin: 10px 0;
}
.dataCenterMain .el-table {
    margin: 0 20px;
    width: auto;
    overflow-y: scroll;
}
.dataCenterMain .el-button+.el-button {
    margin: 0;
}
.dataCenterMain  .el-button--small {
    padding: 9px 6px;
}
.dataCenterMain .el-date-editor .el-range-separator {
    line-height: 27px;
}
.dataCenterMain  .el-input__inner {
    height: 33px;
    line-height: 33px;
}
.dataCenterMain .el-date-editor .el-range__icon {
    line-height: 26px;
}
.dataCenterMain .el-date-editor .el-range__close-icon {
    line-height: 26px;
}
</style>


